<template>
    <div>
       <h3 class="dialog-plate-title"><span>123545</span></h3>
        <!-- 树菜单 -->
        <div class="block" ref="tree" style="margin-top: 20px;overflow-y: auto;">
            <el-tree :data="dataList" node-key="id" :props="defaultProps" accordion>
                 <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ data.code+node.label }}</span>
                    <span>
                        <el-button circle icon="el-icon-view" size="mini" type="success" @click="watchDetail(node,data)"></el-button>
                        <el-button circle icon="el-icon-edit" size="mini" type="primary" @click="openDialog(node, data)"></el-button>
                    </span>
                  </span>
            </el-tree>
        </div>
        <!-- 详情框 -->
        <el-dialog :title="dialog.title" :visible.sync="dialog.isShow" :close-on-click-modal="false" width="1000px">
            <div :style="tableDialogHeightTabPane">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="first">
                        <div class="description">
                            <el-form label-position="right" label-width="80px" :model="dialogData" :inline="true" >
                                <el-form-item label="文件名">
                                    <el-input v-model="dialogData.name" ></el-input>
                                </el-form-item>
                                <el-form-item label="文件编码">
                                    <el-input v-model="dialogData.code" ></el-input>
                                </el-form-item>
                                <el-form-item label="创建人">
                                    <el-input v-model="dialogData.creatorName" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="创建时间">
                                    <el-input v-model="dialogData.createTime" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="文件描述" >
                                    <el-button type="primary" @click="toggkeEeditor">查看描述</el-button>
                                </el-form-item>
                            </el-form>
                            <div v-show="isShowUeditor">
                                <vue-ueditor-wrap v-model="dialogData.content" :config="config"></vue-ueditor-wrap>
                            </div>
                        </div>
                        <el-button type="primary" @click="submitDialogList" class="marginTB16">确 定</el-button>
                    </el-tab-pane>
                    <el-tab-pane label="原文上传" name="second">
                        <el-button type="success"  icon="el-icon-plus" @click="isShowDialog1()">原文附件上传</el-button>
                        <el-table :data="fileList" :header-cell-style="getRowClass" height="500px">
                                <el-table-column prop="fileName" label="文件名" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
                                <el-table-column prop="desc" show-overflow-tooltip label="文件描述" width="180"></el-table-column>
                                <el-table-column prop="uploaderName" label="上传人" width="180"></el-table-column>
                                <el-table-column prop="uploadTime" label="上传时间"></el-table-column>
                                <el-table-column fixed="right" label="操作" sortable align="center" width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="download(scope.row)" type="text" size="small">下载</el-button>
                                    </template>
                                </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="译文上传" name="third">
                        <el-button type="success"  icon="el-icon-plus" @click="isShowDialog1()">译文附件上传</el-button>
                        <el-table :data="translated" :header-cell-style="getRowClass" height="500px">
                                <el-table-column prop="fileName" label="文件名" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
                                <el-table-column prop="desc" show-overflow-tooltip label="文件描述" width="180"></el-table-column>
                                <el-table-column prop="uploaderName" label="上传人" width="180"></el-table-column>
                                <el-table-column prop="uploadTime" label="上传时间"></el-table-column>
                                 <el-table-column fixed="right" label="操作" sortable align="center" width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="download(scope.row)" type="text" size="small">下载</el-button>
                                    </template>
                                </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
        <el-dialog :title="dialog1.title" width="500px" top="60px"  center :visible.sync="dialog1.isShow" :close-on-click-modal="false" @close='closeDialog'>
             <el-form :model="enclosure" :rules="rules" label-position="right" ref="enclosureFrom" label-width="100px">
                 <el-form-item label="文件名" prop="fileName" >
                    <el-input v-model="enclosure.fileName" el-col :span="8"></el-input>
                </el-form-item>
                <el-form-item label="文件描述" prop="desc" el-col :span="12">
                    <el-input v-model="enclosure.desc"></el-input>
                </el-form-item>
                <el-form-item label="原文献">
                    <el-upload action="/api/adscm/operation/xjfile/xjAttachment/upload" class="upload-demo" style="width: 99%;margin: 0 auto;" ref="uploadEnclosure"
                            :auto-upload="false" :limit="1" :http-request="uploadSectionFile">
                        <el-button  slot="trigger" size="small" type="primary">选择文献</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addUpdate()">新增</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :title="dialog2.title" width="1000px" top="60px"  center :visible.sync="dialog2.isShow" :close-on-click-modal="false" :modal="false" :fullscreen="fullscreen">
            <div class="fileContent" :style="fullscreen?'':tableDialogHeightTabPane1">
                 <el-button type="primary" @click="toggleFullScreen" v-text="fullscreen?'取消全屏':'全屏查看'"></el-button>
                <div v-html="fileContent"></div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {quillEditor} from 'vue-quill-editor';
import VueUeditorWrap from 'vue-ueditor-wrap';
import 'static/ueditor/ueditor.config.js'
import 'static/ueditor/ueditor.all.js'
import 'static/ueditor/lang/zh-cn/zh-cn.js'
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import api from '@/axios/api.js'
export default {
     components: {quillEditor,VueUeditorWrap},
    data(){
        return{
            dataList:[],
            translated:[],
            fileList:[],
            enclosure:{},
            defaultProps:{
                label:'name',
                children:'chlidren',
                id: 'id'
            },
            dialog:{
                title:'',
                isShow:false
            },
            dialog1:{
                title:'',
                isShow:false
            },
             dialog2:{
                title:'',
                isShow:false
            },
            activeName:'first',
            tableDialogHeightTabPane: {
                height: (document.documentElement.clientHeight - 240) + 'px',
                overflowY: 'auto'
            },
            tableDialogHeightTabPane1:{
                 height: (document.documentElement.clientHeight - 160) + 'px',
                overflowY: 'auto'
            },
            rules:{
                fileName:[{required: true, message: '请输入文件名名称', trigger: 'blur' }]
            },
            dialogData:{
            },
            fileContent:'',
            fullscreen:false,/**全屏查看 */
            isShowUeditor:false,
            //ueditor
            config: {
                autoHeightEnabled: false,
                initialFrameHeight: 500,
                initialFrameWidth: '100%',
                // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                autoFloatEnabled: true,　　//是否工具栏可浮动
                content:'请输入内容',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
                autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
                BaseUrl: '',
                //serverUrl:  "http://192.168.0.93:8889/mh/ueditor/config",
                UEDITOR_HOME_URL: 'static/ueditor/'
            },
        }
    },
    created(){
        this.getTreeAll();
    },
    methods:{
        getTreeAll(){
            let self =this;
            api.xjFileTreeList().then(res=>{
                self.dataList =res.content;
            })
        },
        openDialog(node,data){
            let self = this;
            self.dialog.title ="详情";
            self.dialog.isShow= true;
            self.dialogData={
                id:data.id,
                parentId:data.parentId,
                name:data.name,
                code:data.code,
                creatorName:'',
                createTime:data.createTime,
                content:'',
            }
            self.activeName='first';
            self.isShowUeditor=false;
             api.treeById(data.id).then(res=>{
                self.dialogData.content=res.content.content;
                self.dialogData.creatorName=res.content.creatorName;
                self.dialogData.createTime=res.content.createTime;

            })
        },
        watchDetail(node,data){
            let self = this;
            self.dialog2.title =`${data.code?data.code:''}${data.name?data.name:''}`;
            self.dialog2.isShow= true;
            self.fullscreen=false;
            api.treeById(data.id).then(res=>{
                self.fileContent=res.content.content?res.content.content:'<div style="text-align: center;;color:#999;font-size:18px;marign-top:80px">内容为空</div>';
            })
        },
        submitDialogList(){
            let self = this;
            api.addUpdateTree('update',self.dialogData).then(res=>{
                self.getTreeAll()
                self.dialog.isShow=false;
                self.$message.success(`${self.dialog.title}添加成功！`);
            })
        },
        handleClick(tab, event){
            let self = this;
           if(this.activeName!='first'){
               self.getFileList();
           }else{
             api.treeById(self.dialogData.id).then(res=>{
                self.dialogData.content=res.content.content;
                self.dialogData.creatorName=res.content.creatorName;
                self.dialogData.createTime=res.content.createTime;
            })
           }
        },

        isShowDialog1(){
            let self = this;
            self.dialog1.title="附件上传";
            self.dialog1.isShow=true;
        },
        uploadSectionFile(param){
        let self = this;
        let fileObj = param.file;
        let form =new FormData();
        let peDocument={
            xid:self.dialogData.id,
            fileName:self.enclosure.fileName,
            desc:self.enclosure.desc,
            type:self.activeName==="second"?0:1
        }
        form.append('xjAttachment',JSON.stringify(peDocument));
        form.append('file',fileObj);
        api.xjAttachmentUpload(form).then(res=>{
            self.$message.success(`${self.activeName==="second"?"原文":"译文"}新增成功`);
             self.dialog1.isShow=false;
             self.getFileList();
        },error=>{
            self.$message.error(`${self.activeName==="second"?"原文":"译文"}新增失败`);
        })
        },
        addUpdate(){
            let self =this;
             this.$refs['enclosureFrom'].validate((valid) => {
                if(valid){
                    if(self.$refs.uploadEnclosure.uploadFiles.length>0){
                        self.$refs.uploadEnclosure.submit();

                    }else{
                        self.$message.error(`请选择${self.activeName==="second"?"原文":"译文"}`);
                    }
                }
            })
        },
        getFileList(){//获取附件列表
            let self = this;
            let type=self.activeName==='second'?0:1;
            api.xjAttachmentList(type,self.dialogData.id).then(res=>{
                self.activeName==='second'?self.fileList=res.content:self.translated=res.content;
            })
        },
        download(row){/**下载附件下载 */
            window.location.href = api.xjAttachmentDownload(row.id);
        },
        toggkeEeditor(){
            this.isShowUeditor= !this.isShowUeditor;
        },
        toggleFullScreen(){
            this.fullscreen = !this.fullscreen;
        },
        closeDialog(){
            this.$refs.uploadEnclosure.clearFiles();
        }
    }
}
</script>
<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 15px;
    padding-right: 8px;
}

.custom-tree-node > span:first-child {
    margin: 0 40px 0 0;
}

.custom-tree-node > span:nth-child(2) {
    display: none;
}

.custom-tree-node:hover > span:nth-child(2) {
    display: inline-block;
}
.description{
   width: 96%
}
.marginTB16{
    margin-top:16px;
    margin-bottom:16px;
}
</style>
